import React from 'react';
import './index.less';
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import { Button, Checkbox } from 'antd-mobile';
const AgreeItem = Checkbox.AgreeItem;


class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);

        this.state={ 
            hmdData:{
               monthNum:'24个月',
               endDate:'2022-10-10',
               dayRate:'0.037%',
            },
            btnChecked:'0',
        }
    }

    componentDidMount(){ 
        //初始化
    }

    //跳转确认提取页面
    btnClick=()=>{ 
    
        this.context.router.push({
			pathname: '/HmdMain/HmdMainPreApplyCon'
        })
    }
    //返回
    btnBack=()=>{ 
    
        this.context.router.push({
			pathname: '/HmdMain/InfoStepThree'
        })
    }
    radioToggleAction = () => {
        let checked = this.state.btnChecked;
        if(checked =='1'){ 
            this.setState({
                btnChecked:'0',
            })
        }else{ 
            this.setState({
                btnChecked:'1',
            })
        }
	}

    render() {
        let iconChecked = this.state.btnChecked=='1'?'icon_radio_checked':'icon_circle';
        let _this = this;
        return (
            <div className="hmd_main_pre_apply">
           		<CommonHeader 
					name='信用贷款度提取'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>
                
                <div className="hmd_apply_top">
                    <div className="hmd_apply_top_title">恭喜您! 本次可借额度为</div>
                    <div className="hmd_apply_top_money">￥20,000.00元</div>
                </div>

                <div className="hmd_apply_middle">
                    <div className="hmd_apply_middle_info">
                        <div className="hmd_apply_middle_info_down">
                            <div> 
                                <span>最低日利率</span>
                                <span>{this.state.hmdData.dayRate}</span>
                            </div>
                            <div> 
                                <span>额度有效期</span>
                                <span>{this.state.hmdData.endDate}</span>
                            </div>
                            <div> 
                                <span>最长分期期数</span>
                                <span>{this.state.hmdData.monthNum}</span>
                            </div>
                        </div>
                    </div>
                </div>


                    
                    <section className="agree_section" onClick={this.radioToggleAction.bind(this)}>
                        <div style={{
                            width:'.4rem',
                            height:'.4rem',
                            marginTop: '.1rem',
                            marginRight:'.1rem',
                            background:'url(./imgs/'+iconChecked+'.png) no-repeat center/100%'
                        }}> 
                        
                        </div>
                        <div className="agreeText">
                            我已阅读并同意遵守《贷款合同》各项贷款.如本人违反合同约定使用安心贷资金,交通银行有权按照合同约定收取罚息和复利.
                            本人愿承担一切违约相关的法律责任
                        </div>
				    </section>

                {/*<div className="hmd_apply_btn">*/}
                    {/*<Button type="primary" inline disabled={this.state.btnChecked=='1'?false:true} className="apply_btn" onClick={this.btnClick}>确认提取</Button>*/}
                    {/*<Button type="primary" inline className="apply_btn" onClick={this.btnBack}>暂时不要,返回</Button>*/}
                {/*</div>*/}
                <div className="btnGroup-two">
                    <Button type="primary" inline className="btnGroup-two-btn"
                            disabled={this.state.btnChecked=='1'?false:true} onClick={this.btnClick}>额度确认</Button>
                    <Button type="primary" inline className="btnGroup-two-btn"
                            onClick={this.btnBack}>暂时不要,返回</Button>
                </div>
            </div>
        );
    }
}
export default HmdMain;